<template>
  <div :id='idname' style="height: 100%; width: 100%; background-color: white;"></div>
</template>

<script setup>



import {defineProps} from 'vue'
const data = defineProps(['title','data','id'])
import * as echarts from 'echarts/core';
import { GridComponent, DataZoomComponent,TitleComponent,TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';
import { useMeteorologyData } from '@/store/Meteorology/Meteorology';
const chartData = useMeteorologyData()
const idname = `chart` + data.id
let ydata = chartData.datas


echarts.use([
TooltipComponent,
  TitleComponent,
  GridComponent,
  DataZoomComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
onMounted(()=>{
  
var chartDom = document.getElementById(idname);
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip:{
    trigger:'item',
    formatter: function (params) {   
            return  params.name + '<br/>' + params.value;  
        }, 
  },
  dataZoom: {
    type: 'inside',
    start: 100,
    end: 0
  },
  xAxis: {
    type: 'category',
    data: chartData.getLastTime(chartData.time)
  },
  yAxis: {
    show: false
  },
  series: [
    {
      data: ydata[chartData.chooseArea][chartData.time][data.id].slice(0,chartData.getLastTime(chartData.time).length),
      type: 'line',
      smooth: true
    }
  ],
  title:{
    text:data.title
  }
};

option && myChart.setOption(option);
window.addEventListener('resize',()=>{
  myChart.resize()
  
})

chartData.$subscribe(()=>{

  
  myChart.setOption({
    series:{
      data: ydata[chartData.chooseArea][chartData.time][data.id].slice(0,chartData.getLastTime(chartData.time).length),
    },
    xAxis:{
      data:chartData.getLastTime(chartData.time)
    },
  })
})


})




</script>

<style scoped>

</style>